import type { Directive } from 'vue'

type UseDirectives = {
  vPcOnly: Directive
  vPcHide: Directive
}
export const useDirectives = (): UseDirectives => ({
  // recommend to use the same name in the whole app with a property
  vPcOnly: {
    getSSRProps({ modifiers }, vnode) {
      return { 'pc-only': Object.keys(modifiers)[0] || 'block' }
    },
  },
  vPcHide: {
    getSSRProps(binding, vnode) {
      return { 'mobile-only': 'yes' }
    },
  },
})
